<template>
  <!--  卡片的父元素 -->
  <el-card class="box-card">
    <!-- 卡片头部的父元素可以用flex布局, 水平两端对齐, 垂直居中对其-->
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <span style="font-family: 'PingFang SC', sans-serif; font-size: 40px ;">汽车列表</span>
      <div style="display: flex; justify-content: flex-end;">
        <div style="margin-right: 10px;">
          <h3>汽车名称</h3>
          <el-input v-model="car1.carName" placeholder="请输入汽车名称"></el-input>
        </div>
        <div style="margin-right: 10px;">
          <h3>汽车品牌</h3>
          <el-input v-model="car1.brand" placeholder="请输入汽车品牌"></el-input>
        </div>
        <div style="margin-right: 10px;">
          <h3>日租金</h3>
          <el-input v-model="car1.dailyRent" placeholder="请输入日租金"></el-input>
        </div>
        <div>
          <h3>汽车油耗</h3>
          <el-input v-model="car1.oilWear" placeholder="请输入油耗"></el-input>
        </div>
      </div>
      <el-button type="primary" @click="addArr">添加汽车</el-button>
</div>
    <div>
      <!-- 左边放标题 -->
      <span>汽车列表</span>
      <!-- 左边放按钮 -->
    </div>
    <!-- 头部下面放卡片主体 -->
    <div>
      <el-table :data="tableData" stripe border max-height="600" style="width: 100%">
        <el-table-column fixed="left" prop="carName" label="汽车名称" min-width="150"></el-table-column>
        <el-table-column prop="brand" label="汽车品牌" min-width="150"></el-table-column>
        <el-table-column prop="oilWear" label="百公里油耗" min-width="150"></el-table-column>
        <el-table-column prop="dailyRent" label="日租金" min-width="150"></el-table-column>
        <el-table-column label="操作" min-width="300px">
          <!-- 用template来自定义这一列的内容 v-slot="scope"可以用scope.row拿到这一行数据对象, scope.$index拿到这一行的索引 -->
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDel(scope.$index)">删除</el-button>
            <el-button type="primary" v-if="scope.row.state==0" size="mini" @click="changeState(scope.$index,1)">出租</el-button>
            <el-button type="success" v-if="scope.row.state==1" size="mini" @click="changeState(scope.$index,0)">归还</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Card01",
  data() {
    return {
      tableData: [
        { carName: '奔驰S600', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S601', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S602', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S603', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S604', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S605', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 },
        { carName: '奔驰S606', brand: '奔驰', oilWear: 18.5, dailyRent: 1000,state:0 }
      ],car1:{}
    }
  },
  methods: {
    handleEdit() {
    },
    handleDel(index) {
      // 使用组件库的弹框函数this.$confirm()
      this.$confirm(`是否确定删除${this.tableData[index].carName}`, '删除', {
        confirmButtonText:'删除', // 指定确认按钮上的文字
        cancelButtonText:'取消' // 指定取消按钮上的文字
      }).then(()=>{
        // 点击确认按钮后的回调函数, this.$message用弹出普通的消息对话框
        this.tableData.splice(index, 1)
        this.$message ({
          type:'success',
          message:'操作成功!'
        })
      })
    },
    changeState(index, state) {
      // 弹出确认框, js自带 confirm() 函数, 但是有点丑
      let car = this.tableData[index]
      let action = state == 0 ? '归还':'出租'
      // 使用组件库的弹框函数this.$confirm()
      this.$confirm(`是否确定${action}${car.carName}`, action, {
        confirmButtonText:action, // 指定确认按钮上的文字
        cancelButtonText:'取消' // 指定取消按钮上的文字
      }).then(()=>{
        // 点击确认按钮后的回调函数, this.$message用弹出普通的消息对话框
        car.state = state
        this.$message ({
          type:'success',
          message:'操作成功!'
        })
      })
    },addArr(){
      this.$confirm('是否要添加汽车',"添加汽车",{
        confirmButtonText:'确定添加',
        cancelButtonText:'取消添加'
      }).then(()=>{
        let newcar={
          carName:this.car1.carName,
          brand:this.car1.brand,
          oilWear:this.car1.oilWear,
          dailyRent:this.car1.dailyRent,
          state:0
        }
        this.tableData.push(newcar)
        this.$message({
          type:"success",
          message:`添加${newcar.carName}车辆成功`
        })
      })
    }
  }
}
</script>

<style scoped>

</style>



